<template>

  <!-- 搜索框 -->
  <el-card style="height: 80px">
    <el-form :model="queryForm" :inline="true" class="form">
      <el-form-item label="用户:">
        <el-input
            v-model="queryForm.queryUserName"
            placeholder="请输入用户名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="search">
          搜索
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>


  <!-- 添加用户和批量删除 -->
  <el-card style="margin: 10px 0">
    <!-- table展示用户信息 -->
    <el-table
        style="margin: 10px 0"
        row-key="createdAt"
        :data="postsTableData"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
          label="标题"
          align="center"
          prop="title"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="用户"
          align="center"
          prop="username"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="内容"
          align="center"
          prop="content"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="时间"
          align="center"
          prop="createdAt"
          :formatter="formatDate"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" fixed="right" width="70px" align="center">
        <template #="{ row }">
          <el-tooltip effect="dark" content="删除" placement="top">
            <el-button
                type="danger"
                size="small"
                icon="Delete"
                @click="handleDelete(row)"
            >
            </el-button>
          </el-tooltip>
        </template>

      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :background="true"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @current-change="findAll"
        @size-change="handler"
    />
  </el-card>

</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import {ElFormItem, ElMessageBox} from 'element-plus'
import {apiGet, apiPost} from "@/utils/api.ts";
import {formatDate} from "@/utils/time.ts";
//搜索表单数据
let queryForm = reactive({
  queryUserName: '',
})
//默认页码
let pageNo = ref<number>(1)
//一页展示几条数据
let pageSize = ref<number>(5)
//总个数
let total = ref<number>(0)
//存储全部的数组
let postsTableData = ref([])
//获取全部用户信息
let findAll = async (pager = 1) => {
  //收集当前页码
  pageNo.value = pager
  let parameter = {
    page: pageNo.value,
    limit: pageSize.value,
    userName: queryForm.queryUserName
  }
  //获取表单数据
  let {data} = await apiGet('/forumPosts/findAll', parameter)
  total.value = data.count
  postsTableData.value = data.data
}

//分页器下拉菜单的自定义事件的回调
const handler = () => {
  findAll()
}

//搜索按钮的回调
const search = () => {
  findAll()
}

//删除
const handleDelete = async (row: any) => {
  //提示用户确认删除吗
  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(async () => {
        if (row.grade===1){
          await apiPost('/forumPosts/delete', {postId: row.postId})
        }else{
          await apiPost('/forumComments/delete', {commentId: row.title})
        }
        await findAll(postsTableData.value.length > 1 ? pageNo.value : pageNo.value - 1)
      })
      .catch(() => {
      })
}

//组件挂载完毕
onMounted(() => {
  findAll()
})
</script>

<style scoped>
</style>
